
<!DOCTYPE html>
<html>
  <head>
    <title>font-mfizz glyphs preview</title>
    <link rel="stylesheet" href="font-mfizz.css" />
    <!--[if lte IE 7]><link rel="stylesheet" href="fontcustom-ie7.css" /><![endif]-->

    <style>
      * {
        -moz-box-sizing: border-box;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin: 0;
        padding: 0;
      }

      body {
        background: #fff;
        color: #444;
        font: 16px/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
      }

      a, 
      a:visited {
        color: #888;
        text-decoration: underline;
      }
      a:hover, 
      a:focus { color: #000; }

      h1 {
        border-bottom: 2px solid #ddd;
        color: #888;
        font-size: 36px;
        font-weight: 300;
        margin-bottom: 20px;
        padding: 20px 0;
      }

      .container {
        margin: 0 auto;
        min-width: 880px;
        padding: 0 40px;
        width: 80%;
      }

      .glyph {
        border-bottom: 1px dotted #ccc;
        padding: 10px 0 20px;
        margin-bottom: 20px;
      }

      .preview-glyphs { vertical-align: bottom; } 

      .preview-scale { 
        color: #888;
        font-size: 12px; 
        margin-top: 5px;
      }

      .step {
        display: inline-block;
        line-height: 1;
        width: 10%;
      }

      
      .size-12 { font-size: 12px; }
      
      .size-14 { font-size: 14px; }
      
      .size-16 { font-size: 16px; }
      
      .size-18 { font-size: 18px; }
      
      .size-21 { font-size: 21px; }
      
      .size-24 { font-size: 24px; }
      
      .size-36 { font-size: 36px; }
      
      .size-48 { font-size: 48px; }
      
      .size-60 { font-size: 60px; }
      
      .size-72 { font-size: 72px; }
      

      .usage { margin-top: 10px; }

      .usage input {
        font-family: monospace;
        margin-right: 3px;
        padding: 2px 5px;
        text-align: center;
      }

      .usage .point { width: 150px; }

      .usage .class { width: 250px; }

      .footer {
        color: #888;
        font-size: 12px;
        padding: 20px 0;
      }
    </style>

    <!--[if lte IE 8]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
  </head>

  <body>
    <div class="container">
      <h1>font-mfizz contains 91 glyphs:</h1> 

      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-microscope size-12"></i><i class="step icon-microscope size-14"></i><i class="step icon-microscope size-16"></i><i class="step icon-microscope size-18"></i><i class="step icon-microscope size-21"></i><i class="step icon-microscope size-24"></i><i class="step icon-microscope size-36"></i><i class="step icon-microscope size-48"></i><i class="step icon-microscope size-60"></i><i class="step icon-microscope size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-microscope" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf100;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-cplusplus size-12"></i><i class="step icon-cplusplus size-14"></i><i class="step icon-cplusplus size-16"></i><i class="step icon-cplusplus size-18"></i><i class="step icon-cplusplus size-21"></i><i class="step icon-cplusplus size-24"></i><i class="step icon-cplusplus size-36"></i><i class="step icon-cplusplus size-48"></i><i class="step icon-cplusplus size-60"></i><i class="step icon-cplusplus size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cplusplus" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf101;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-wireless size-12"></i><i class="step icon-wireless size-14"></i><i class="step icon-wireless size-16"></i><i class="step icon-wireless size-18"></i><i class="step icon-wireless size-21"></i><i class="step icon-wireless size-24"></i><i class="step icon-wireless size-36"></i><i class="step icon-wireless size-48"></i><i class="step icon-wireless size-60"></i><i class="step icon-wireless size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-wireless" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf102;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-fire-alt size-12"></i><i class="step icon-fire-alt size-14"></i><i class="step icon-fire-alt size-16"></i><i class="step icon-fire-alt size-18"></i><i class="step icon-fire-alt size-21"></i><i class="step icon-fire-alt size-24"></i><i class="step icon-fire-alt size-36"></i><i class="step icon-fire-alt size-48"></i><i class="step icon-fire-alt size-60"></i><i class="step icon-fire-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-fire-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf103;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mobile-device size-12"></i><i class="step icon-mobile-device size-14"></i><i class="step icon-mobile-device size-16"></i><i class="step icon-mobile-device size-18"></i><i class="step icon-mobile-device size-21"></i><i class="step icon-mobile-device size-24"></i><i class="step icon-mobile-device size-36"></i><i class="step icon-mobile-device size-48"></i><i class="step icon-mobile-device size-60"></i><i class="step icon-mobile-device size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mobile-device" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf104;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-objc size-12"></i><i class="step icon-objc size-14"></i><i class="step icon-objc size-16"></i><i class="step icon-objc size-18"></i><i class="step icon-objc size-21"></i><i class="step icon-objc size-24"></i><i class="step icon-objc size-36"></i><i class="step icon-objc size-48"></i><i class="step icon-objc size-60"></i><i class="step icon-objc size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-objc" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf105;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-redhat size-12"></i><i class="step icon-redhat size-14"></i><i class="step icon-redhat size-16"></i><i class="step icon-redhat size-18"></i><i class="step icon-redhat size-21"></i><i class="step icon-redhat size-24"></i><i class="step icon-redhat size-36"></i><i class="step icon-redhat size-48"></i><i class="step icon-redhat size-60"></i><i class="step icon-redhat size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-redhat" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf106;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-freebsd size-12"></i><i class="step icon-freebsd size-14"></i><i class="step icon-freebsd size-16"></i><i class="step icon-freebsd size-18"></i><i class="step icon-freebsd size-21"></i><i class="step icon-freebsd size-24"></i><i class="step icon-freebsd size-36"></i><i class="step icon-freebsd size-48"></i><i class="step icon-freebsd size-60"></i><i class="step icon-freebsd size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-freebsd" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf107;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-heroku size-12"></i><i class="step icon-heroku size-14"></i><i class="step icon-heroku size-16"></i><i class="step icon-heroku size-18"></i><i class="step icon-heroku size-21"></i><i class="step icon-heroku size-24"></i><i class="step icon-heroku size-36"></i><i class="step icon-heroku size-48"></i><i class="step icon-heroku size-60"></i><i class="step icon-heroku size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-heroku" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf108;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-python size-12"></i><i class="step icon-python size-14"></i><i class="step icon-python size-16"></i><i class="step icon-python size-18"></i><i class="step icon-python size-21"></i><i class="step icon-python size-24"></i><i class="step icon-python size-36"></i><i class="step icon-python size-48"></i><i class="step icon-python size-60"></i><i class="step icon-python size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-python" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf109;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-java size-12"></i><i class="step icon-java size-14"></i><i class="step icon-java size-16"></i><i class="step icon-java size-18"></i><i class="step icon-java size-21"></i><i class="step icon-java size-24"></i><i class="step icon-java size-36"></i><i class="step icon-java size-48"></i><i class="step icon-java size-60"></i><i class="step icon-java size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-java" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-satellite size-12"></i><i class="step icon-satellite size-14"></i><i class="step icon-satellite size-16"></i><i class="step icon-satellite size-18"></i><i class="step icon-satellite size-21"></i><i class="step icon-satellite size-24"></i><i class="step icon-satellite size-36"></i><i class="step icon-satellite size-48"></i><i class="step icon-satellite size-60"></i><i class="step icon-satellite size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-satellite" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-debian size-12"></i><i class="step icon-debian size-14"></i><i class="step icon-debian size-16"></i><i class="step icon-debian size-18"></i><i class="step icon-debian size-21"></i><i class="step icon-debian size-24"></i><i class="step icon-debian size-36"></i><i class="step icon-debian size-48"></i><i class="step icon-debian size-60"></i><i class="step icon-debian size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-debian" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-grails size-12"></i><i class="step icon-grails size-14"></i><i class="step icon-grails size-16"></i><i class="step icon-grails size-18"></i><i class="step icon-grails size-21"></i><i class="step icon-grails size-24"></i><i class="step icon-grails size-36"></i><i class="step icon-grails size-48"></i><i class="step icon-grails size-60"></i><i class="step icon-grails size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-grails" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-c size-12"></i><i class="step icon-c size-14"></i><i class="step icon-c size-16"></i><i class="step icon-c size-18"></i><i class="step icon-c size-21"></i><i class="step icon-c size-24"></i><i class="step icon-c size-36"></i><i class="step icon-c size-48"></i><i class="step icon-c size-60"></i><i class="step icon-c size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-c" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-postgres size-12"></i><i class="step icon-postgres size-14"></i><i class="step icon-postgres size-16"></i><i class="step icon-postgres size-18"></i><i class="step icon-postgres size-21"></i><i class="step icon-postgres size-24"></i><i class="step icon-postgres size-36"></i><i class="step icon-postgres size-48"></i><i class="step icon-postgres size-60"></i><i class="step icon-postgres size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-postgres" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf10f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-database-alt2 size-12"></i><i class="step icon-database-alt2 size-14"></i><i class="step icon-database-alt2 size-16"></i><i class="step icon-database-alt2 size-18"></i><i class="step icon-database-alt2 size-21"></i><i class="step icon-database-alt2 size-24"></i><i class="step icon-database-alt2 size-36"></i><i class="step icon-database-alt2 size-48"></i><i class="step icon-database-alt2 size-60"></i><i class="step icon-database-alt2 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-database-alt2" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf110;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-raspberrypi size-12"></i><i class="step icon-raspberrypi size-14"></i><i class="step icon-raspberrypi size-16"></i><i class="step icon-raspberrypi size-18"></i><i class="step icon-raspberrypi size-21"></i><i class="step icon-raspberrypi size-24"></i><i class="step icon-raspberrypi size-36"></i><i class="step icon-raspberrypi size-48"></i><i class="step icon-raspberrypi size-60"></i><i class="step icon-raspberrypi size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-raspberrypi" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf111;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-nginx size-12"></i><i class="step icon-nginx size-14"></i><i class="step icon-nginx size-16"></i><i class="step icon-nginx size-18"></i><i class="step icon-nginx size-21"></i><i class="step icon-nginx size-24"></i><i class="step icon-nginx size-36"></i><i class="step icon-nginx size-48"></i><i class="step icon-nginx size-60"></i><i class="step icon-nginx size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-nginx" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf112;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-ruby-on-rails size-12"></i><i class="step icon-ruby-on-rails size-14"></i><i class="step icon-ruby-on-rails size-16"></i><i class="step icon-ruby-on-rails size-18"></i><i class="step icon-ruby-on-rails size-21"></i><i class="step icon-ruby-on-rails size-24"></i><i class="step icon-ruby-on-rails size-36"></i><i class="step icon-ruby-on-rails size-48"></i><i class="step icon-ruby-on-rails size-60"></i><i class="step icon-ruby-on-rails size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-ruby-on-rails" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf113;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-redis size-12"></i><i class="step icon-redis size-14"></i><i class="step icon-redis size-16"></i><i class="step icon-redis size-18"></i><i class="step icon-redis size-21"></i><i class="step icon-redis size-24"></i><i class="step icon-redis size-36"></i><i class="step icon-redis size-48"></i><i class="step icon-redis size-60"></i><i class="step icon-redis size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-redis" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf114;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-scala size-12"></i><i class="step icon-scala size-14"></i><i class="step icon-scala size-16"></i><i class="step icon-scala size-18"></i><i class="step icon-scala size-21"></i><i class="step icon-scala size-24"></i><i class="step icon-scala size-36"></i><i class="step icon-scala size-48"></i><i class="step icon-scala size-60"></i><i class="step icon-scala size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-scala" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf115;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-gnome size-12"></i><i class="step icon-gnome size-14"></i><i class="step icon-gnome size-16"></i><i class="step icon-gnome size-18"></i><i class="step icon-gnome size-21"></i><i class="step icon-gnome size-24"></i><i class="step icon-gnome size-36"></i><i class="step icon-gnome size-48"></i><i class="step icon-gnome size-60"></i><i class="step icon-gnome size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-gnome" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf116;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-perl size-12"></i><i class="step icon-perl size-14"></i><i class="step icon-perl size-16"></i><i class="step icon-perl size-18"></i><i class="step icon-perl size-21"></i><i class="step icon-perl size-24"></i><i class="step icon-perl size-36"></i><i class="step icon-perl size-48"></i><i class="step icon-perl size-60"></i><i class="step icon-perl size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-perl" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf117;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mysql size-12"></i><i class="step icon-mysql size-14"></i><i class="step icon-mysql size-16"></i><i class="step icon-mysql size-18"></i><i class="step icon-mysql size-21"></i><i class="step icon-mysql size-24"></i><i class="step icon-mysql size-36"></i><i class="step icon-mysql size-48"></i><i class="step icon-mysql size-60"></i><i class="step icon-mysql size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mysql" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf118;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-fedora size-12"></i><i class="step icon-fedora size-14"></i><i class="step icon-fedora size-16"></i><i class="step icon-fedora size-18"></i><i class="step icon-fedora size-21"></i><i class="step icon-fedora size-24"></i><i class="step icon-fedora size-36"></i><i class="step icon-fedora size-48"></i><i class="step icon-fedora size-60"></i><i class="step icon-fedora size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-fedora" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf119;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-ghost size-12"></i><i class="step icon-ghost size-14"></i><i class="step icon-ghost size-16"></i><i class="step icon-ghost size-18"></i><i class="step icon-ghost size-21"></i><i class="step icon-ghost size-24"></i><i class="step icon-ghost size-36"></i><i class="step icon-ghost size-48"></i><i class="step icon-ghost size-60"></i><i class="step icon-ghost size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-ghost" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-google size-12"></i><i class="step icon-google size-14"></i><i class="step icon-google size-16"></i><i class="step icon-google size-18"></i><i class="step icon-google size-21"></i><i class="step icon-google size-24"></i><i class="step icon-google size-36"></i><i class="step icon-google size-48"></i><i class="step icon-google size-60"></i><i class="step icon-google size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-google" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-netbsd size-12"></i><i class="step icon-netbsd size-14"></i><i class="step icon-netbsd size-16"></i><i class="step icon-netbsd size-18"></i><i class="step icon-netbsd size-21"></i><i class="step icon-netbsd size-24"></i><i class="step icon-netbsd size-36"></i><i class="step icon-netbsd size-48"></i><i class="step icon-netbsd size-60"></i><i class="step icon-netbsd size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-netbsd" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-aws size-12"></i><i class="step icon-aws size-14"></i><i class="step icon-aws size-16"></i><i class="step icon-aws size-18"></i><i class="step icon-aws size-21"></i><i class="step icon-aws size-24"></i><i class="step icon-aws size-36"></i><i class="step icon-aws size-48"></i><i class="step icon-aws size-60"></i><i class="step icon-aws size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-aws" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-bomb size-12"></i><i class="step icon-bomb size-14"></i><i class="step icon-bomb size-16"></i><i class="step icon-bomb size-18"></i><i class="step icon-bomb size-21"></i><i class="step icon-bomb size-24"></i><i class="step icon-bomb size-36"></i><i class="step icon-bomb size-48"></i><i class="step icon-bomb size-60"></i><i class="step icon-bomb size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-bomb" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-looking size-12"></i><i class="step icon-looking size-14"></i><i class="step icon-looking size-16"></i><i class="step icon-looking size-18"></i><i class="step icon-looking size-21"></i><i class="step icon-looking size-24"></i><i class="step icon-looking size-36"></i><i class="step icon-looking size-48"></i><i class="step icon-looking size-60"></i><i class="step icon-looking size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-looking" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf11f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-ruby size-12"></i><i class="step icon-ruby size-14"></i><i class="step icon-ruby size-16"></i><i class="step icon-ruby size-18"></i><i class="step icon-ruby size-21"></i><i class="step icon-ruby size-24"></i><i class="step icon-ruby size-36"></i><i class="step icon-ruby size-48"></i><i class="step icon-ruby size-60"></i><i class="step icon-ruby size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-ruby" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf120;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mysql-alt size-12"></i><i class="step icon-mysql-alt size-14"></i><i class="step icon-mysql-alt size-16"></i><i class="step icon-mysql-alt size-18"></i><i class="step icon-mysql-alt size-21"></i><i class="step icon-mysql-alt size-24"></i><i class="step icon-mysql-alt size-36"></i><i class="step icon-mysql-alt size-48"></i><i class="step icon-mysql-alt size-60"></i><i class="step icon-mysql-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mysql-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf121;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-playframework-alt size-12"></i><i class="step icon-playframework-alt size-14"></i><i class="step icon-playframework-alt size-16"></i><i class="step icon-playframework-alt size-18"></i><i class="step icon-playframework-alt size-21"></i><i class="step icon-playframework-alt size-24"></i><i class="step icon-playframework-alt size-36"></i><i class="step icon-playframework-alt size-48"></i><i class="step icon-playframework-alt size-60"></i><i class="step icon-playframework-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-playframework-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf122;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-osx size-12"></i><i class="step icon-osx size-14"></i><i class="step icon-osx size-16"></i><i class="step icon-osx size-18"></i><i class="step icon-osx size-21"></i><i class="step icon-osx size-24"></i><i class="step icon-osx size-36"></i><i class="step icon-osx size-48"></i><i class="step icon-osx size-60"></i><i class="step icon-osx size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-osx" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf123;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-database size-12"></i><i class="step icon-database size-14"></i><i class="step icon-database size-16"></i><i class="step icon-database size-18"></i><i class="step icon-database size-21"></i><i class="step icon-database size-24"></i><i class="step icon-database size-36"></i><i class="step icon-database size-48"></i><i class="step icon-database size-60"></i><i class="step icon-database size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-database" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf124;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-database-alt size-12"></i><i class="step icon-database-alt size-14"></i><i class="step icon-database-alt size-16"></i><i class="step icon-database-alt size-18"></i><i class="step icon-database-alt size-21"></i><i class="step icon-database-alt size-24"></i><i class="step icon-database-alt size-36"></i><i class="step icon-database-alt size-48"></i><i class="step icon-database-alt size-60"></i><i class="step icon-database-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-database-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf125;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-shell size-12"></i><i class="step icon-shell size-14"></i><i class="step icon-shell size-16"></i><i class="step icon-shell size-18"></i><i class="step icon-shell size-21"></i><i class="step icon-shell size-24"></i><i class="step icon-shell size-36"></i><i class="step icon-shell size-48"></i><i class="step icon-shell size-60"></i><i class="step icon-shell size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-shell" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf126;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-script size-12"></i><i class="step icon-script size-14"></i><i class="step icon-script size-16"></i><i class="step icon-script size-18"></i><i class="step icon-script size-21"></i><i class="step icon-script size-24"></i><i class="step icon-script size-36"></i><i class="step icon-script size-48"></i><i class="step icon-script size-60"></i><i class="step icon-script size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-script" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf127;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-antenna size-12"></i><i class="step icon-antenna size-14"></i><i class="step icon-antenna size-16"></i><i class="step icon-antenna size-18"></i><i class="step icon-antenna size-21"></i><i class="step icon-antenna size-24"></i><i class="step icon-antenna size-36"></i><i class="step icon-antenna size-48"></i><i class="step icon-antenna size-60"></i><i class="step icon-antenna size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-antenna" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf128;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-coffee-bean size-12"></i><i class="step icon-coffee-bean size-14"></i><i class="step icon-coffee-bean size-16"></i><i class="step icon-coffee-bean size-18"></i><i class="step icon-coffee-bean size-21"></i><i class="step icon-coffee-bean size-24"></i><i class="step icon-coffee-bean size-36"></i><i class="step icon-coffee-bean size-48"></i><i class="step icon-coffee-bean size-60"></i><i class="step icon-coffee-bean size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-coffee-bean" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf129;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-scala-alt size-12"></i><i class="step icon-scala-alt size-14"></i><i class="step icon-scala-alt size-16"></i><i class="step icon-scala-alt size-18"></i><i class="step icon-scala-alt size-21"></i><i class="step icon-scala-alt size-24"></i><i class="step icon-scala-alt size-36"></i><i class="step icon-scala-alt size-48"></i><i class="step icon-scala-alt size-60"></i><i class="step icon-scala-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-scala-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-platter size-12"></i><i class="step icon-platter size-14"></i><i class="step icon-platter size-16"></i><i class="step icon-platter size-18"></i><i class="step icon-platter size-21"></i><i class="step icon-platter size-24"></i><i class="step icon-platter size-36"></i><i class="step icon-platter size-48"></i><i class="step icon-platter size-60"></i><i class="step icon-platter size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-platter" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-java-duke size-12"></i><i class="step icon-java-duke size-14"></i><i class="step icon-java-duke size-16"></i><i class="step icon-java-duke size-18"></i><i class="step icon-java-duke size-21"></i><i class="step icon-java-duke size-24"></i><i class="step icon-java-duke size-36"></i><i class="step icon-java-duke size-48"></i><i class="step icon-java-duke size-60"></i><i class="step icon-java-duke size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-java-duke" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-iphone size-12"></i><i class="step icon-iphone size-14"></i><i class="step icon-iphone size-16"></i><i class="step icon-iphone size-18"></i><i class="step icon-iphone size-21"></i><i class="step icon-iphone size-24"></i><i class="step icon-iphone size-36"></i><i class="step icon-iphone size-48"></i><i class="step icon-iphone size-60"></i><i class="step icon-iphone size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-iphone" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-script-alt size-12"></i><i class="step icon-script-alt size-14"></i><i class="step icon-script-alt size-16"></i><i class="step icon-script-alt size-18"></i><i class="step icon-script-alt size-21"></i><i class="step icon-script-alt size-24"></i><i class="step icon-script-alt size-36"></i><i class="step icon-script-alt size-48"></i><i class="step icon-script-alt size-60"></i><i class="step icon-script-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-script-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-google-alt size-12"></i><i class="step icon-google-alt size-14"></i><i class="step icon-google-alt size-16"></i><i class="step icon-google-alt size-18"></i><i class="step icon-google-alt size-21"></i><i class="step icon-google-alt size-24"></i><i class="step icon-google-alt size-36"></i><i class="step icon-google-alt size-48"></i><i class="step icon-google-alt size-60"></i><i class="step icon-google-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-google-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf12f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-haskell size-12"></i><i class="step icon-haskell size-14"></i><i class="step icon-haskell size-16"></i><i class="step icon-haskell size-18"></i><i class="step icon-haskell size-21"></i><i class="step icon-haskell size-24"></i><i class="step icon-haskell size-36"></i><i class="step icon-haskell size-48"></i><i class="step icon-haskell size-60"></i><i class="step icon-haskell size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-haskell" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf130;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mariadb size-12"></i><i class="step icon-mariadb size-14"></i><i class="step icon-mariadb size-16"></i><i class="step icon-mariadb size-18"></i><i class="step icon-mariadb size-21"></i><i class="step icon-mariadb size-24"></i><i class="step icon-mariadb size-36"></i><i class="step icon-mariadb size-48"></i><i class="step icon-mariadb size-60"></i><i class="step icon-mariadb size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mariadb" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf131;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-phone-retro size-12"></i><i class="step icon-phone-retro size-14"></i><i class="step icon-phone-retro size-16"></i><i class="step icon-phone-retro size-18"></i><i class="step icon-phone-retro size-21"></i><i class="step icon-phone-retro size-24"></i><i class="step icon-phone-retro size-36"></i><i class="step icon-phone-retro size-48"></i><i class="step icon-phone-retro size-60"></i><i class="step icon-phone-retro size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-phone-retro" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf132;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-phone-alt size-12"></i><i class="step icon-phone-alt size-14"></i><i class="step icon-phone-alt size-16"></i><i class="step icon-phone-alt size-18"></i><i class="step icon-phone-alt size-21"></i><i class="step icon-phone-alt size-24"></i><i class="step icon-phone-alt size-36"></i><i class="step icon-phone-alt size-48"></i><i class="step icon-phone-alt size-60"></i><i class="step icon-phone-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-phone-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf133;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-csharp size-12"></i><i class="step icon-csharp size-14"></i><i class="step icon-csharp size-16"></i><i class="step icon-csharp size-18"></i><i class="step icon-csharp size-21"></i><i class="step icon-csharp size-24"></i><i class="step icon-csharp size-36"></i><i class="step icon-csharp size-48"></i><i class="step icon-csharp size-60"></i><i class="step icon-csharp size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-csharp" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf134;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-php size-12"></i><i class="step icon-php size-14"></i><i class="step icon-php size-16"></i><i class="step icon-php size-18"></i><i class="step icon-php size-21"></i><i class="step icon-php size-24"></i><i class="step icon-php size-36"></i><i class="step icon-php size-48"></i><i class="step icon-php size-60"></i><i class="step icon-php size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-php" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf135;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-postgres-alt size-12"></i><i class="step icon-postgres-alt size-14"></i><i class="step icon-postgres-alt size-16"></i><i class="step icon-postgres-alt size-18"></i><i class="step icon-postgres-alt size-21"></i><i class="step icon-postgres-alt size-24"></i><i class="step icon-postgres-alt size-36"></i><i class="step icon-postgres-alt size-48"></i><i class="step icon-postgres-alt size-60"></i><i class="step icon-postgres-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-postgres-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf136;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-html size-12"></i><i class="step icon-html size-14"></i><i class="step icon-html size-16"></i><i class="step icon-html size-18"></i><i class="step icon-html size-21"></i><i class="step icon-html size-24"></i><i class="step icon-html size-36"></i><i class="step icon-html size-48"></i><i class="step icon-html size-60"></i><i class="step icon-html size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-html" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf137;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mfizz size-12"></i><i class="step icon-mfizz size-14"></i><i class="step icon-mfizz size-16"></i><i class="step icon-mfizz size-18"></i><i class="step icon-mfizz size-21"></i><i class="step icon-mfizz size-24"></i><i class="step icon-mfizz size-36"></i><i class="step icon-mfizz size-48"></i><i class="step icon-mfizz size-60"></i><i class="step icon-mfizz size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mfizz" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf138;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-apache size-12"></i><i class="step icon-apache size-14"></i><i class="step icon-apache size-16"></i><i class="step icon-apache size-18"></i><i class="step icon-apache size-21"></i><i class="step icon-apache size-24"></i><i class="step icon-apache size-36"></i><i class="step icon-apache size-48"></i><i class="step icon-apache size-60"></i><i class="step icon-apache size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-apache" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf139;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-hadoop size-12"></i><i class="step icon-hadoop size-14"></i><i class="step icon-hadoop size-16"></i><i class="step icon-hadoop size-18"></i><i class="step icon-hadoop size-21"></i><i class="step icon-hadoop size-24"></i><i class="step icon-hadoop size-36"></i><i class="step icon-hadoop size-48"></i><i class="step icon-hadoop size-60"></i><i class="step icon-hadoop size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-hadoop" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-ruby-on-rails-alt size-12"></i><i class="step icon-ruby-on-rails-alt size-14"></i><i class="step icon-ruby-on-rails-alt size-16"></i><i class="step icon-ruby-on-rails-alt size-18"></i><i class="step icon-ruby-on-rails-alt size-21"></i><i class="step icon-ruby-on-rails-alt size-24"></i><i class="step icon-ruby-on-rails-alt size-36"></i><i class="step icon-ruby-on-rails-alt size-48"></i><i class="step icon-ruby-on-rails-alt size-60"></i><i class="step icon-ruby-on-rails-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-ruby-on-rails-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mobile-phone-broadcast size-12"></i><i class="step icon-mobile-phone-broadcast size-14"></i><i class="step icon-mobile-phone-broadcast size-16"></i><i class="step icon-mobile-phone-broadcast size-18"></i><i class="step icon-mobile-phone-broadcast size-21"></i><i class="step icon-mobile-phone-broadcast size-24"></i><i class="step icon-mobile-phone-broadcast size-36"></i><i class="step icon-mobile-phone-broadcast size-48"></i><i class="step icon-mobile-phone-broadcast size-60"></i><i class="step icon-mobile-phone-broadcast size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mobile-phone-broadcast" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-css size-12"></i><i class="step icon-css size-14"></i><i class="step icon-css size-16"></i><i class="step icon-css size-18"></i><i class="step icon-css size-21"></i><i class="step icon-css size-24"></i><i class="step icon-css size-36"></i><i class="step icon-css size-48"></i><i class="step icon-css size-60"></i><i class="step icon-css size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-css" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-playframework size-12"></i><i class="step icon-playframework size-14"></i><i class="step icon-playframework size-16"></i><i class="step icon-playframework size-18"></i><i class="step icon-playframework size-21"></i><i class="step icon-playframework size-24"></i><i class="step icon-playframework size-36"></i><i class="step icon-playframework size-48"></i><i class="step icon-playframework size-60"></i><i class="step icon-playframework size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-playframework" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-clojure size-12"></i><i class="step icon-clojure size-14"></i><i class="step icon-clojure size-16"></i><i class="step icon-clojure size-18"></i><i class="step icon-clojure size-21"></i><i class="step icon-clojure size-24"></i><i class="step icon-clojure size-36"></i><i class="step icon-clojure size-48"></i><i class="step icon-clojure size-60"></i><i class="step icon-clojure size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-clojure" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf13f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mobile-phone-alt size-12"></i><i class="step icon-mobile-phone-alt size-14"></i><i class="step icon-mobile-phone-alt size-16"></i><i class="step icon-mobile-phone-alt size-18"></i><i class="step icon-mobile-phone-alt size-21"></i><i class="step icon-mobile-phone-alt size-24"></i><i class="step icon-mobile-phone-alt size-36"></i><i class="step icon-mobile-phone-alt size-48"></i><i class="step icon-mobile-phone-alt size-60"></i><i class="step icon-mobile-phone-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mobile-phone-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf140;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-suse size-12"></i><i class="step icon-suse size-14"></i><i class="step icon-suse size-16"></i><i class="step icon-suse size-18"></i><i class="step icon-suse size-21"></i><i class="step icon-suse size-24"></i><i class="step icon-suse size-36"></i><i class="step icon-suse size-48"></i><i class="step icon-suse size-60"></i><i class="step icon-suse size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-suse" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf141;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-java-bold size-12"></i><i class="step icon-java-bold size-14"></i><i class="step icon-java-bold size-16"></i><i class="step icon-java-bold size-18"></i><i class="step icon-java-bold size-21"></i><i class="step icon-java-bold size-24"></i><i class="step icon-java-bold size-36"></i><i class="step icon-java-bold size-48"></i><i class="step icon-java-bold size-60"></i><i class="step icon-java-bold size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-java-bold" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf142;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-nginx-alt size-12"></i><i class="step icon-nginx-alt size-14"></i><i class="step icon-nginx-alt size-16"></i><i class="step icon-nginx-alt size-18"></i><i class="step icon-nginx-alt size-21"></i><i class="step icon-nginx-alt size-24"></i><i class="step icon-nginx-alt size-36"></i><i class="step icon-nginx-alt size-48"></i><i class="step icon-nginx-alt size-60"></i><i class="step icon-nginx-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-nginx-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf143;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-nginx-alt2 size-12"></i><i class="step icon-nginx-alt2 size-14"></i><i class="step icon-nginx-alt2 size-16"></i><i class="step icon-nginx-alt2 size-18"></i><i class="step icon-nginx-alt2 size-21"></i><i class="step icon-nginx-alt2 size-24"></i><i class="step icon-nginx-alt2 size-36"></i><i class="step icon-nginx-alt2 size-48"></i><i class="step icon-nginx-alt2 size-60"></i><i class="step icon-nginx-alt2 size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-nginx-alt2" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf144;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-linux-mint size-12"></i><i class="step icon-linux-mint size-14"></i><i class="step icon-linux-mint size-16"></i><i class="step icon-linux-mint size-18"></i><i class="step icon-linux-mint size-21"></i><i class="step icon-linux-mint size-24"></i><i class="step icon-linux-mint size-36"></i><i class="step icon-linux-mint size-48"></i><i class="step icon-linux-mint size-60"></i><i class="step icon-linux-mint size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-linux-mint" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf145;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-dreamhost size-12"></i><i class="step icon-dreamhost size-14"></i><i class="step icon-dreamhost size-16"></i><i class="step icon-dreamhost size-18"></i><i class="step icon-dreamhost size-21"></i><i class="step icon-dreamhost size-24"></i><i class="step icon-dreamhost size-36"></i><i class="step icon-dreamhost size-48"></i><i class="step icon-dreamhost size-60"></i><i class="step icon-dreamhost size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-dreamhost" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf146;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-blackberry size-12"></i><i class="step icon-blackberry size-14"></i><i class="step icon-blackberry size-16"></i><i class="step icon-blackberry size-18"></i><i class="step icon-blackberry size-21"></i><i class="step icon-blackberry size-24"></i><i class="step icon-blackberry size-36"></i><i class="step icon-blackberry size-48"></i><i class="step icon-blackberry size-60"></i><i class="step icon-blackberry size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-blackberry" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf147;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-javascript size-12"></i><i class="step icon-javascript size-14"></i><i class="step icon-javascript size-16"></i><i class="step icon-javascript size-18"></i><i class="step icon-javascript size-21"></i><i class="step icon-javascript size-24"></i><i class="step icon-javascript size-36"></i><i class="step icon-javascript size-48"></i><i class="step icon-javascript size-60"></i><i class="step icon-javascript size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-javascript" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf148;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-ubuntu size-12"></i><i class="step icon-ubuntu size-14"></i><i class="step icon-ubuntu size-16"></i><i class="step icon-ubuntu size-18"></i><i class="step icon-ubuntu size-21"></i><i class="step icon-ubuntu size-24"></i><i class="step icon-ubuntu size-36"></i><i class="step icon-ubuntu size-48"></i><i class="step icon-ubuntu size-60"></i><i class="step icon-ubuntu size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-ubuntu" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf149;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-php-alt size-12"></i><i class="step icon-php-alt size-14"></i><i class="step icon-php-alt size-16"></i><i class="step icon-php-alt size-18"></i><i class="step icon-php-alt size-21"></i><i class="step icon-php-alt size-24"></i><i class="step icon-php-alt size-36"></i><i class="step icon-php-alt size-48"></i><i class="step icon-php-alt size-60"></i><i class="step icon-php-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-php-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14a;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-centos size-12"></i><i class="step icon-centos size-14"></i><i class="step icon-centos size-16"></i><i class="step icon-centos size-18"></i><i class="step icon-centos size-21"></i><i class="step icon-centos size-24"></i><i class="step icon-centos size-36"></i><i class="step icon-centos size-48"></i><i class="step icon-centos size-60"></i><i class="step icon-centos size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-centos" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14b;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-nodejs size-12"></i><i class="step icon-nodejs size-14"></i><i class="step icon-nodejs size-16"></i><i class="step icon-nodejs size-18"></i><i class="step icon-nodejs size-21"></i><i class="step icon-nodejs size-24"></i><i class="step icon-nodejs size-36"></i><i class="step icon-nodejs size-48"></i><i class="step icon-nodejs size-60"></i><i class="step icon-nodejs size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-nodejs" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14c;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-splatter size-12"></i><i class="step icon-splatter size-14"></i><i class="step icon-splatter size-16"></i><i class="step icon-splatter size-18"></i><i class="step icon-splatter size-21"></i><i class="step icon-splatter size-24"></i><i class="step icon-splatter size-36"></i><i class="step icon-splatter size-48"></i><i class="step icon-splatter size-60"></i><i class="step icon-splatter size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-splatter" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14d;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-3dprint size-12"></i><i class="step icon-3dprint size-14"></i><i class="step icon-3dprint size-16"></i><i class="step icon-3dprint size-18"></i><i class="step icon-3dprint size-21"></i><i class="step icon-3dprint size-24"></i><i class="step icon-3dprint size-36"></i><i class="step icon-3dprint size-48"></i><i class="step icon-3dprint size-60"></i><i class="step icon-3dprint size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-3dprint" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14e;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-line-graph size-12"></i><i class="step icon-line-graph size-14"></i><i class="step icon-line-graph size-16"></i><i class="step icon-line-graph size-18"></i><i class="step icon-line-graph size-21"></i><i class="step icon-line-graph size-24"></i><i class="step icon-line-graph size-36"></i><i class="step icon-line-graph size-48"></i><i class="step icon-line-graph size-60"></i><i class="step icon-line-graph size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-line-graph" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf14f;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-cassandra size-12"></i><i class="step icon-cassandra size-14"></i><i class="step icon-cassandra size-16"></i><i class="step icon-cassandra size-18"></i><i class="step icon-cassandra size-21"></i><i class="step icon-cassandra size-24"></i><i class="step icon-cassandra size-36"></i><i class="step icon-cassandra size-48"></i><i class="step icon-cassandra size-60"></i><i class="step icon-cassandra size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-cassandra" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf150;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-solaris size-12"></i><i class="step icon-solaris size-14"></i><i class="step icon-solaris size-16"></i><i class="step icon-solaris size-18"></i><i class="step icon-solaris size-21"></i><i class="step icon-solaris size-24"></i><i class="step icon-solaris size-36"></i><i class="step icon-solaris size-48"></i><i class="step icon-solaris size-60"></i><i class="step icon-solaris size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-solaris" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf151;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-jetty size-12"></i><i class="step icon-jetty size-14"></i><i class="step icon-jetty size-16"></i><i class="step icon-jetty size-18"></i><i class="step icon-jetty size-21"></i><i class="step icon-jetty size-24"></i><i class="step icon-jetty size-36"></i><i class="step icon-jetty size-48"></i><i class="step icon-jetty size-60"></i><i class="step icon-jetty size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-jetty" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf152;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-tomcat size-12"></i><i class="step icon-tomcat size-14"></i><i class="step icon-tomcat size-16"></i><i class="step icon-tomcat size-18"></i><i class="step icon-tomcat size-21"></i><i class="step icon-tomcat size-24"></i><i class="step icon-tomcat size-36"></i><i class="step icon-tomcat size-48"></i><i class="step icon-tomcat size-60"></i><i class="step icon-tomcat size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-tomcat" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf153;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-oracle size-12"></i><i class="step icon-oracle size-14"></i><i class="step icon-oracle size-16"></i><i class="step icon-oracle size-18"></i><i class="step icon-oracle size-21"></i><i class="step icon-oracle size-24"></i><i class="step icon-oracle size-36"></i><i class="step icon-oracle size-48"></i><i class="step icon-oracle size-60"></i><i class="step icon-oracle size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-oracle" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf154;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-oracle-alt size-12"></i><i class="step icon-oracle-alt size-14"></i><i class="step icon-oracle-alt size-16"></i><i class="step icon-oracle-alt size-18"></i><i class="step icon-oracle-alt size-21"></i><i class="step icon-oracle-alt size-24"></i><i class="step icon-oracle-alt size-36"></i><i class="step icon-oracle-alt size-48"></i><i class="step icon-oracle-alt size-60"></i><i class="step icon-oracle-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-oracle-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf155;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-mssql size-12"></i><i class="step icon-mssql size-14"></i><i class="step icon-mssql size-16"></i><i class="step icon-mssql size-18"></i><i class="step icon-mssql size-21"></i><i class="step icon-mssql size-24"></i><i class="step icon-mssql size-36"></i><i class="step icon-mssql size-48"></i><i class="step icon-mssql size-60"></i><i class="step icon-mssql size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-mssql" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf156;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-google-developers size-12"></i><i class="step icon-google-developers size-14"></i><i class="step icon-google-developers size-16"></i><i class="step icon-google-developers size-18"></i><i class="step icon-google-developers size-21"></i><i class="step icon-google-developers size-24"></i><i class="step icon-google-developers size-36"></i><i class="step icon-google-developers size-48"></i><i class="step icon-google-developers size-60"></i><i class="step icon-google-developers size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-google-developers" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf157;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-google-code size-12"></i><i class="step icon-google-code size-14"></i><i class="step icon-google-code size-16"></i><i class="step icon-google-code size-18"></i><i class="step icon-google-code size-21"></i><i class="step icon-google-code size-24"></i><i class="step icon-google-code size-36"></i><i class="step icon-google-code size-48"></i><i class="step icon-google-code size-60"></i><i class="step icon-google-code size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-google-code" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf158;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-kde size-12"></i><i class="step icon-kde size-14"></i><i class="step icon-kde size-16"></i><i class="step icon-kde size-18"></i><i class="step icon-kde size-21"></i><i class="step icon-kde size-24"></i><i class="step icon-kde size-36"></i><i class="step icon-kde size-48"></i><i class="step icon-kde size-60"></i><i class="step icon-kde size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-kde" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf159;" />
        </div>
      </div>
      
      <div class="glyph">
        <div class="preview-glyphs">
          <i class="step icon-grails-alt size-12"></i><i class="step icon-grails-alt size-14"></i><i class="step icon-grails-alt size-16"></i><i class="step icon-grails-alt size-18"></i><i class="step icon-grails-alt size-21"></i><i class="step icon-grails-alt size-24"></i><i class="step icon-grails-alt size-36"></i><i class="step icon-grails-alt size-48"></i><i class="step icon-grails-alt size-60"></i><i class="step icon-grails-alt size-72"></i>
        </div>
        <div class="preview-scale">
          <span class="step">12</span><span class="step">14</span><span class="step">16</span><span class="step">18</span><span class="step">21</span><span class="step">24</span><span class="step">36</span><span class="step">48</span><span class="step">60</span><span class="step">72</span> 
        </div>
        <div class="usage">
          <input class="class" type="text" readonly="readonly" onClick="this.select();" value=".icon-grails-alt" />
          <input class="point" type="text" readonly="readonly" onClick="this.select();" value="&amp;#xf15a;" />
        </div>
      </div>
      

      <div class="footer">
        Made with love using <a href="http://fontcustom.com">Font Custom</a>.
      </div>
    </div>
  </body>
</html>
